<template>
  <div class="main-home">
    <div class="welcome">
      <div class="message">
        <div class="hello">欢迎登录</div>
        <div class="info">{{ userInfo.nickname }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      deviceImg: ''
    }
  },

  computed: {
    ...mapGetters(['userInfo'])

  },
  watch: {},
  mounted() {},
  created() {},
  methods: {}
}
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.main-home {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #cce0f230;
}
.welcome {
  font-size: 36px;
  width: 700px;
  margin: 0 auto;
  .message {
    padding-top: 150px;
    margin-left: 30px;
    float: left;
    text-shadow: #000 1px 1px 2px;
    .hello {
      font-weight: 800;
      color: #ea731a;
      margin-bottom: 10px;
    }
    .info {
      font-weight: 800;
      color: #0881b3;
    }
  }
  .image {
    float: left;
    img {
      height: 356px;
      width: 356px;
      border: 1px solid #eee;
      border-radius: 50%;
      box-shadow: 3px 4px 12px 0px rgba(200, 194, 194, 0.9);
    }

    // margin: 0 auto;
    // width: 656px;
  }

  padding-top: 100px;
}
</style>

